<template>
  <div class="contacts-bg">
    <div class="contacts-header">通讯录</div>
    <div class="contacts-list">
      <div
        v-for="group in contactGroups"
        :key="group.letter"
        class="contacts-group"
      >
        <div class="contacts-group-title">{{ group.letter }}</div>
        <div
          v-for="user in group.users"
          :key="user.id"
          class="contacts-item"
          @click="onContact(user)"
        >
          <img class="contacts-avatar" :src="user.avatar" />
          <div class="contacts-info">
            <div class="contacts-name">{{ user.name }}</div>
            <div class="contacts-dept">{{ user.dept }}</div>
          </div>
          <div class="contacts-phone">{{ user.phone }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "contacts",
  data() {
    return {
      contactGroups: [
        {
          letter: "A",
          users: [
            {
              id: 1,
              name: "阿明",
              avatar: "https://picsum.photos/40/40?random=5",
              dept: "技术部",
              phone: "13900000001",
            },
          ],
        },
        {
          letter: "L",
          users: [
            {
              id: 2,
              name: "李华",
              avatar: "https://picsum.photos/40/40?random=6",
              dept: "市场部",
              phone: "13900000002",
            },
            {
              id: 3,
              name: "李雷",
              avatar: "https://picsum.photos/40/40?random=7",
              dept: "人事部",
              phone: "13900000003",
            },
          ],
        },
        {
          letter: "W",
          users: [
            {
              id: 4,
              name: "王芳",
              avatar: "https://picsum.photos/40/40?random=8",
              dept: "财务部",
              phone: "13900000004",
            },
          ],
        },
      ],
    };
  },
  methods: {
    onContact(user) {
      // this.$toast(user.name + "，功能开发中...");
      // 这里可跳转到联系人详情页
      this.$router.push({
        path: "/contactDetail",
        query: { id: user.id },
      });
    },
  },
};
</script>

<style scoped>
.contacts-bg {
  min-height: 100vh;
  background: #fff;
  padding-bottom: 40px;
}
.contacts-header {
  background: #1677ff;
  color: #fff;
  font-size: 22px;
  font-weight: bold;
  text-align: center;
  padding: 18px 0 12px 0;
  letter-spacing: 2px;
  position: relative;
}
.contacts-list {
  margin: 18px 12px 0 12px;
}
.contacts-group {
  margin-bottom: 18px;
}
.contacts-group-title {
  font-size: 15px;
  color: #1677ff;
  font-weight: bold;
  margin-bottom: 8px;
  margin-left: 4px;
  letter-spacing: 1px;
}
.contacts-item {
  display: flex;
  align-items: center;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 2px 8px #1677ff11;
  padding: 12px 16px;
  margin-bottom: 10px;
  cursor: pointer;
  transition: box-shadow 0.2s, background 0.2s;
  border: 1px solid #e0f7fa;
  position: relative;
}
.contacts-item:hover {
  background: #f6f8fa;
  box-shadow: 0 4px 16px #42d0ea22;
}
.contacts-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  margin-right: 14px;
  object-fit: cover;
  background: #f2f2f2;
  border: 2px solid #fff;
  box-shadow: 0 1px 4px #1677ff22;
}
.contacts-info {
  flex: 1;
  min-width: 0;
}
.contacts-name {
  font-size: 16px;
  font-weight: 500;
  color: #222;
}
.contacts-dept {
  font-size: 13px;
  color: #888;
  margin-top: 2px;
}
.contacts-phone {
  color: #1677ff;
  font-size: 14px;
  margin-left: 12px;
  white-space: nowrap;
  font-family: monospace;
}
</style> 